import React, { PureComponent } from 'react';
import moment from 'moment';
import { Table, Dropdown, Menu, Modal, Input, message } from 'antd';
import copy from 'copy-to-clipboard';
import styles from './index.less';

class AderTable extends PureComponent {
  state = {
    selectedRowKeys: [],
    toPay: false,
    aderId: '',
    amount: '',
  };

  componentWillReceiveProps(nextProps) {
    // clean state
    if (nextProps.selectedRows.length === 0) {
      this.setState({
        selectedRowKeys: [],
      });
    }
  }

  onInputChange = (e) => {
    const { value } = e.target;
    this.setState({
      amount: value,
    });
    // const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/;
    // if ((!isNaN(value) && reg.test(value)) || value === '' || value === '-') {
    //   this.props.onChange(value);
    // }
  };

  handleRowSelectChange = (selectedRowKeys, selectedRows) => {
    if (this.props.onSelectRow) {
      this.props.onSelectRow(selectedRows);
    }

    this.setState({ selectedRowKeys });
  };

  handleTableChange = (pagination, filters, sorter) => {
    this.props.onChange(pagination, filters, sorter);
  };

  cleanSelectedKeys = () => {
    this.handleRowSelectChange([], []);
  };


  render() {
    const { selectedRowKeys, toPay } = this.state;
    const { data: { content, totalElements, size, number }, loading } = this.props;
    const { onPay, onEdit, onShowHistory } = this.props;

    const handleButtonClick = (e, record) => {
      onShowHistory(true, record.id);
    };
    // const handlePayInput = () => {
    //   onPay();
    //   this.setState({
    //     toPay: false,
    //   });
    // };
    const handleOk = () => {
      const { aderId, amount } = this.state;
      onPay(aderId, amount);
      this.setState({
        toPay: false,
      });
    };

    const handleCancel = () => {
      this.setState({
        toPay: false,
      });
    };


    const handleMenuClick = (record, e) => {
      if (e.key === '1') {
        onEdit(true, record);
      } else if (e.key === '2') {
        this.setState({
          toPay: true,
          aderId: record.id,
        });
        // // confirm({
        //   title: 'Are you sure delete this record?',
        //   // onOk() {
        //   //   onPay(record.id);
        //   // },
        // });
      } else if (e.key === '3') {
        copy(this.props.aderId);
        message.success('复制成功');
      }
    };

    const columns = [
      {
        title: '广告主名称',
        dataIndex: 'name',
      },
      {
        title: '广告主网址',
        dataIndex: 'adUrl',
        // sorter: true,
        // align: 'right',
        // render: val => `${val} 万`,
      },
      {
        title: '余额',
        dataIndex: 'balance',
      },
      {
        title: '今日消耗',
        dataIndex: 'costToday',
      },
      {
        title: '历史总消耗',
        dataIndex: 'costHistory',
      },
      {
        title: '创建时间',
        dataIndex: 'createAt',
        sorter: true,
        render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
      },
      {
        title: '操作',
        render: (text, record) => {
          return (
            <div>
              <Dropdown.Button
                type="primary"
                onClick={e => handleButtonClick(e, record)}
                overlay={(
                  <Menu onClick={e => handleMenuClick(record, e)}>
                    <Menu.Item key="1">编辑</Menu.Item>
                    <Menu.Item key="2">预付</Menu.Item>
                    <Menu.Item key="3">复制报表地址</Menu.Item>
                  </Menu>
                )}
              >
                查看明细
              </Dropdown.Button>
            </div>
          );
        },
      },
    ];

    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      total: totalElements,
      pageSize: size,
      current: parseInt(number, 10) + 1 || 1,
    };

    const rowSelection = {
      selectedRowKeys,
      onChange: this.handleRowSelectChange,
      getCheckboxProps: record => ({
        disabled: record.disabled,
      }),
    };

    return (
      <div className={styles.standardTable}>
        <Table
          loading={loading}
          rowKey={record => record.key}
          rowSelection={rowSelection}
          dataSource={content}
          columns={columns}
          pagination={paginationProps}
          onChange={this.handleTableChange}
        />
        <Modal
          title="预付"
          visible={toPay}
          onOk={handleOk}
          onCancel={handleCancel}
        >
          <Input
            // style={{ width: 90 }}
            onChange={this.onInputChange}
            // onBlur={this.onBlur}
            placeholder="Input a number"
            maxLength="25"
          />
        </Modal>
      </div>
    );
  }
}

export default AderTable;
